@extends('layout.homeindex')
@section('title','注册页面')



@section('main')

<div class="banner-top">
	<div class="container">
		<h1>Register</h1>
		<em></em>
		<h2><a href="index.html">Home</a><label>/</label>Register</a></h2>
	</div>
</div>
<!--login-->
<div class="container">
		<div class="login">
			 <div id="errorshow">

                @if (count($errors) > 0)
                    <div class="alert alert-danger">

                        <ul>
                        <li>注册失败:</li>
                            @foreach ($errors->all() as $error)
                                <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>

			<form action="{{url('register')}}" method="post">
			<div class="col-md-6 login-do">
				<div class="login-mail">
					<input type="text" placeholder="Email" name="homeuseremail"   required="">
					<i  class="glyphicon glyphicon-envelope"></i>
				</div>
				<div class="login-mail">
					<input type="text" placeholder="Phone Number" name="homeusertel"  required="">
					<i  class="glyphicon glyphicon-phone"></i>
				</div>
				<div class="login-mail">
					<input type="password" placeholder="Password" name="homeuserpassword"  required="">
					<i class="glyphicon glyphicon-lock"></i>
				</div>
				<div class="login-mail">
					<input type="password" placeholder="Please Re-enter Password" name="homeuserrepassword"  required="">
					<i class="glyphicon glyphicon-lock"></i>
				</div>
				<div class="login-mail">		
					<label class="radio-inline">
					  <input type="radio" name="homeusersex"  value="M"> Man
					</label>
					<label class="radio-inline">
					  <input type="radio" name="homeusersex"  value="W"> Women
					</label>
				</div>
				<div class="login-mail">
					 {{csrf_field()}}
					{!! Geetest::render() !!}
				</div>
				
				<label class="hvr-skew-backward">
					<input type="submit" value="Submit">
				</label>
			</div>
			</form>

		<div class="col-md-6 login-right">
				 <h3>Completely Free Account</h3>
				 
				 <p>Pellentesque neque leo, dictum sit amet accumsan non, dignissim ac mauris. Mauris rhoncus, lectus tincidunt tempus aliquam, odio 
				 libero tincidunt metus, sed euismod elit enim ut mi. Nulla porttitor et dolor sed condimentum. Praesent porttitor lorem dui, in pulvinar enim rhoncus vitae. Curabitur tincidunt, turpis ac lobortis hendrerit, ex elit vestibulum est, at faucibus erat ligula non neque.</p>
				<a href="{{url('/sign')}}" class="hvr-skew-backward">Login</a>

			</div>
			
			<div class="clearfix"> </div>
			
		</div>

</div>

<!--//login-->

		<!--brand-->
		<div class="container">
			<div class="brand">
				<div class="col-md-3 brand-grid">
					<img src="{{ URL::asset('homelizzj/images/ic.png') }}" class="img-responsive" alt="">
				</div>
				<div class="col-md-3 brand-grid">
					<img src="{{ URL::asset('homelizzj/images/ic1.png') }}" class="img-responsive" alt="">
				</div>
				<div class="col-md-3 brand-grid">
					<img src="{{ URL::asset('homelizzj/images/ic2.png') }}" class="img-responsive" alt="">
				</div>
				<div class="col-md-3 brand-grid">
					<img src="{{ URL::asset('homelizzj/images/ic3.png') }}" class="img-responsive" alt="">
				</div>
				<div class="clearfix"></div>
			</div>
			</div>
			<!--//brand-->
			</div>
			
		</div>
	<!--//content-->
<script type="text/javascript">
			// 返回的错误弹出框的设置
		var error = document.getElementById('errorshow');
		    error.onclick = function(){
		        document.getElementById('errorshow').style.display = 'none';
		    }

		    // 关于ajax的验证
		    // 声明全局变量 检测input 是否输入正确
			var EMAIL = false;
			var PASS = false;
			var REPASS = false;
			var TEL = false;


			//绑定表单提交事件
			$('form').submit(function(){
				//触发所有的丧失焦点事件
				$('input').trigger('blur');
				if(EMAIL && PASS && REPASS && TEL){
					return true;
				}
				//阻止默认行为
				return false;
			})
			
			//邮箱丧失焦点事件
			$('input[name=homeuseremail]').blur(function(){
				//获取邮箱的值
				var email = $(this).val();
				// 判断邮箱是否为空
				if(email == ''){
					// 为空
					$(this).next().html('邮箱不能为空').css('color','#cc66ff');	
				}else{
					//正则
					var reg = /^\w+@\w+\.(com|cn|com.cn|net|org)$/;
					//检测
					var res = reg.test(email);
					if(!res){
						$(this).next().html('请输入正确的邮箱,以便于激活').css('color','#cc66ff');					
						//阻止发送ajax
						return false;
					}
					var inp = $(this);
					// 发送ajax
					$.ajax({
						url:'{{"/homeuseremail"}}',
						data:{email:email},
						type:'get',
						//同步
						async:false,
						success:function(data){
							//判断用户名是否可用
							if(data == 0){
								inp.next().html('您可以使用该邮箱').css('color','#00ff33');
								//修改全局变量
								EMAIL = true;
							}else{
								//用户不可用
								inp.next().html('邮箱已经存在').css('color','#cc66ff');
							}
						},
						error:function(){
							alert('ajax错误');
						}
					})
				}				
			})
			//手机号丧失焦点事件
			$('input[name=homeusertel]').blur(function(){
				//获取邮箱的值
				var tel = $(this).val();
				// 判断邮箱是否为空
				if(tel == ''){
					// 为空
					$(this).next().html('手机号不能为空').css('color','#cc66ff');	
				}else{
					//正则
					var reg = /^1(3|4|5|7|8)\d{9}$/;
					//检测
					var res = reg.test(tel);
					if(!res){
						$(this).next().html('手机号格式不正确').css('color','#cc66ff');					
						//阻止发送ajax
						return false;
					}
					var inp = $(this);
					// 发送ajax
					$.ajax({
						url:'{{"/homeusertel"}}',
						data:{tel:tel},
						type:'get',
						//同步
						async:false,
						success:function(data){
							//判断用户名是否可用
							if(data == 0){
								inp.next().html('您可以使用该手机号码').css('color','#00ff33');
								TEL = true;
							}else{
								//手机号不可用
								inp.next().html('手机号码已经存在').css('color','#cc66ff');
							}
						},
						error:function(){
							alert('ajax错误');
						}
					})
				}				
			})


			// 密码丧失焦点事件
			$('input[name=homeuserpassword]').blur(function(){
				//获取密码的值
				var pass = $(this).val();
				if(pass == ''){
					//为空
					$(this).next().html('密码不能为空').css('color','#cc66ff');
				}else{
					//正则
					var reg = /^\w{6,18}$/;
					if(reg.test(pass)){
						inp.next().html('√').css('color','#00ff33');
						PASS = true;
					}else{
						//错误
						$(this).next().html('密码格式错误,6-18位数字字母下划线').css('color','#cc66ff');
					}
				}			
			})

			// 确认密码丧失焦点事件
			$('input[name=homeuserrepassword]').blur(function(){
				//获取确认密码的值
				var repass = $(this).val();
				//获取密码的值
				var pass = $('input[name=homeuserpassword]').val();
				if(repass == ''){
					//错误
					$(this).next().html('确认密码不能为空').css('color','#cc66ff');
					return false;
				}
				//判断
				if(repass == pass){
					inp.next().html('√').css('color','#00ff33');
					REPASS = true;
				}else{
					//错误
					$(this).next().html('两次输入的密码不一样').css('color','#cc66ff');
				}
			})



</script>


	@endsection


